<template>
  <div>
    <el-card style="margin:20px;padding:10px;">
      <!-- 查询条件区域 -->
      <el-row>
        <el-col :span="5" style="margin:0px 5px;">
          <el-input placeholder="输入关键字查询" clearable v-model="queryInfo.title">
            <el-button slot="append" icon="el-icon-search" @click="getProjectShowList" clearable></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" >
          <span>发布时间:</span>
          <!-- 起始时间 -->
          <el-date-picker
              style="margin:0px 40px 0 40px"
              v-model="queryInfo.beginDate"
              type="date"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="起始日期"

          ></el-date-picker>
          <!-- 结束时间 -->
          <el-date-picker
                          v-model="queryInfo.endData"
                          type="date"
                          clearable
                          value-format="yyyy-MM-dd"
                          placeholder="结束日期"
          ></el-date-picker>
        </el-col>

        <!-- 类型选择 -->
        <el-col :span="3" style="margin:0px 5px;">
          <el-select placeholder="校企会议类型" clearable v-model="queryInfo.type" style="width: 150px;">
            <el-option value="0" label="项目成果展示会"/>
            <el-option value="1" label="企业专场招聘会"/>
          </el-select>
        </el-col>

        <el-col :span="8" style="margin: 15px 0 15px 5px;">
          <el-button type="success" class="el-icon-search" @click="getProjectShowList">搜索</el-button>
          <el-button type="warning" class="el-icon-delete" @click="cleanQueryInfo()">重置</el-button>
          <el-button type="primary" @click="toAdd">添加校企</el-button>
          <el-button type="danger" @click="removeProjects">批量删除</el-button>
        </el-col>
      </el-row>
      <!--校企合作新闻列表 -->
      <el-table border stripe :data="projectShowList" style="margin-top:20px " ref="projectRef">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>

        <el-table-column type="index" label="序号" width="60px">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ (page - 1) * limit + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column label='新闻标题' prop='proTitle' width="200px"></el-table-column>
        <el-table-column label='新闻类型' width="150px">
          <template slot-scope="scope">
            {{ scope.row.proType === 0 ? "项目成果展示会" : "企业专场招聘会" }}
          </template>
        </el-table-column>
        <el-table-column label='校企图片' prop='proImg'>
          <template slot-scope="scope">
            <el-image :src="scope.row.proImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column label='校企描述' prop='proDesc' width="500px"></el-table-column>
        <el-table-column label='操作' width="150px">
          <template slot-scope="scope">

            <el-tooltip class="item" effect="dark" content="编辑新闻" placement="top" style="margin: 0 10px">
              <el-button type="primary" class="el-icon-edit" circle
                         @click="editProjectShow(scope.row.proId)"></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="删除新闻" placement="top">
              <el-button type="danger" class="el-icon-delete" circle @click="removeShow(scope.row.proId)"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
      />
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'List',
  created() {
    this.getProjectShowList()
  },
  data() {
    return {
      page: 1, //当前页
      limit: 5, //每页记录数
      total: 0, //总记录数
      queryInfo: {}, //查询对象
      projectShowList: [], //校企合作新闻列表
      ids:[],//校企id数组
    }
  },
  methods: {
    //.获取校企合作新闻列表
    async getProjectShowList() {
      let result = await this.$http.project.reqGetProjectPage(this.page, this.limit, this.queryInfo)
      console.log(result)
      if (result.code !== 200) return this.$message.error(result.message)
      this.projectShowList = result.data.rows
      this.total = result.data.total
    },
    //.删除校企合作新闻列表
    async removeShow(id) {
      const confrimResult = await this.$confirm('此操作将永久删除该新闻是否继续?', '删除提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消操作',
        type: "warning"
      }).catch(err => err)
      if (confrimResult !== "confirm") {
        return this.$message.info("删除操作已取消")
      }
      let result = await this.$http.project.reqRemoveShowById(id)
      if (result.code !== 200) return this.$message.error(result.message)
      this.$message.success('删除成功')
      this.getProjectShowList()
    },
    //.编辑校企合作新闻
    editProjectShow(id) {
      this.$router.push(`/project/edit/${id}`)
    },
    //.分页:显示数据行数的监听事件
    handleSizeChange(newSize) {
      this.limit = newSize
      this.getProjectShowList()
    },
    //.分页:页码改变监听事件
    handleCurrentChange(newPage) {
      this.page = newPage
      this.getProjectShowList()
    },
    //清空查询信息并查询
    cleanQueryInfo() {
      this.queryInfo = {}
      this.getProjectShowList()
    },
    //跳转添加校企
    toAdd() {
      this.$router.push('/project/add')
    },
    /**
     * 批量删除校企
     * @returns {Promise<ElMessageComponent>}
     */
    async removeProjects() {
      //判断是否选中
      if (this.$refs.projectRef.selection.length <= 0) {
        return this.$message.warning("请先选中校企!")
      }

      //判断是否确认删除
      const confirmResult = await this.$confirm('此操作将永久删除选中校企是否继续?', '删除提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消操作',
        type: "warning"
      }).catch(err => err)
      if (confirmResult !== "confirm") {
        return this.$message.info("删除操作已取消")
      }
      //根据id数组批量删除新闻
      this.$refs.projectRef.selection.forEach(item => {
        this.ids.push(item.proId)
      })
      let result = await this.$http.project.reqrRmoveProjects(this.ids)
      if (result.code !== 200) return this.$message.error(result.message)
      this.$message.success("批量删除成功!")
      this.ids = []
      this.getProjectShowList()
    }

  }
}
</script>

<style>
</style>
